<template>
  <div class="header">
    <div class="header-wrapper w">
      <div class="left">
        <div class="logo"></div>
        <div
          class="city"
          v-show="$route.path === '/home'"
          @click="dialogVisible = true"
        >
          <span>
            <i class="el-icon-location-information"></i> {{ activeCity }}</span
          >
          <span class="change-city">[切换城市]</span>
        </div>
        <div class="nav">
          <a @click="$router.push({ name: 'Home' })">首页</a>
          <a
            @click="toPosition"
            :class="{ active: $route.path === '/Position' }"
            >职位</a
          >
          <a class="school">校园</a>
          <a>海归</a>
          <a>公司</a>
          <a>APP</a>
          <a>咨询</a>
          <a class="find">有了</a>
          <a>百科</a>
        </div>
      </div>
      <div class="right">
        <div class="user">
          <a href="#">上传简历</a>
          <a href="#">我要找工作</a>
          <a href="#">我要招聘</a>
        </div>
        <div class="btn">
          <a href="#" class="register">注册</a>
          <a href="#" class="login">登录</a>
        </div>
      </div>
      <el-dialog :visible.sync="dialogVisible" width="35%">
        <div class="title">
          <h4>城市选择</h4>
          <p>切换城市分站，让我们为您提供更准确的信息</p>
        </div>
        <div class="content">
          <p>当前定位</p>
          <div class="cur-city">
            <i class="el-icon-location-outline"></i>
            <span>{{ activeCity }}站</span>
          </div>
          <div class="content-title">
            点击返回<a href="#">"全国站"</a>或切换到以下城市
          </div>
          <ul class="city-nav scrollStyle">
            <li
              v-for="c in cityList"
              :key="c.code"
              @click="changeCityHandle(c.name)"
            >
              {{ c.name }}站
            </li>
          </ul>
          <span>其他分站开通中，敬请期待~</span>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { reqGerCitySitesList } from '@/api/header'
export default {
  name: 'LHeader',
  data() {
    return {
      dialogVisible: false,
      cityList: [],
      activeCity: '深圳',
    }
  },
  methods: {
    toPosition() {
      this.$router.push({
        path: 'Position',
      })
    },
    changeCityHandle(name) {
      this.activeCity = name
      this.dialogVisible = false
    },
  },
  async mounted() {
    const { zpData } = await reqGerCitySitesList()
    this.cityList = zpData
  },
}
</script>

<style scoped>
.header {
  width: 100%;
  height: 49px;
  background: #202329;
  box-shadow: 0 1px 8px rgb(0 0 0 / 6%);
}
.header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  position: relative;
}
.header-wrapper a {
  color: #fff;
  padding: 10px 10px;
}
.header-wrapper a:hover {
  color: #00d7c6;
}
.left {
  display: flex;
  align-items: center;
}
.right {
  display: flex;
}
.logo {
  width: 110px;
  height: 36px;
  background: url(https://static.zhipin.com/zhipin-geek/chat/v179/static/images/logo-2x.0bd629ae.png)
    3px 13px no-repeat;
  background-size: 105px 19px;
  padding-top: 10px;
  margin-right: 20px;
}
.school,
.find {
  position: relative;
}
.school::after {
  content: 'New';
  width: 30px;
  height: 14px;
  box-sizing: border-box;
  position: absolute;
  left: 30px;
  top: 0px;
  line-height: 13px;
  background-color: #ef505e;
  color: #fff;
  font-size: 12px;
  border-radius: 7px;
}
.find::after {
  content: 'hot';
  width: 28px;
  height: 14px;
  box-sizing: border-box;
  position: absolute;
  left: 30px;
  top: 0px;
  line-height: 13px;
  background-color: #ef505e;
  color: #fff;
  font-size: 12px;
  border-radius: 7px;
  text-align: center;
}
.btn a {
  border: 1px solid #5dd5c8;
  border-radius: 15px;
  margin: 0 10px;
  padding: 0 10px;
  display: inline-block;
}
.city {
  color: #00d7c6;
  cursor: pointer;
}
.city span {
  margin: 0 5px;
}
.city i {
  font-size: 16px;
}
.change-city {
  color: #fff;
}
.active {
  color: #00d7c6 !important;
}
.title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: url(https://img.bosszhipin.com/static/file/2022/h2jks07fg11658717172935.png)
      0 0/574px 160px no-repeat,
    linear-gradient(180deg, #00bebd 0, #fff 100%);
  height: 160px;
  padding-left: 30px;
  border-radius: 8px;
}
.title h4 {
  margin: 40px 0 15px 0;
  font-size: 24px;
  color: #fff;
}
.content {
  padding: 28px 0 30px 30px;
}
.content p {
  color: #222;
  font-size: 16px;
}
.cur-city {
  margin: 16px 0 20px 0;
  border-radius: 4px;
  border: 1px solid #d4d5d6;
  height: 32px;
  line-height: 32px;
  color: #1d2129;
  text-align: center;
  cursor: pointer;
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.cur-city:hover {
  color: #00a6a7;
  background-color: rgba(0, 190, 189, 0.1);
}
.cur-city i {
  font-size: 16px;
}
.content-title {
  font-size: 16px;
  font-weight: 500;
  color: #222;
  line-height: 22px;
  margin-bottom: 10px;
}
.content-title a {
  color: #00bebd;
}
.city-nav {
  display: flex;
  height: 260px;
  overflow: auto;
  flex-wrap: wrap;
}
.city-nav li {
  width: 90px;
  height: 32px;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 32px;
  margin: 0 15px 20px 0;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s linear;
}
.city-nav li:hover {
  border-color: #00bebd;
  color: #00bebd;
}
</style>
